<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    
    <div id="app">
        <h3>明星列表</h3>
        <ul>
            <li v-for="item in stars">
                {{item}}
            </li>
        </ul>
        <hr>
        <h3>学生列表</h3>
        <ul>
            <li v-for="item,key in students">
                <h4>{{key}}.姓名:{{item.studentName}}</h4>
                <p>年龄：{{item.age}}---学校：{{item.school}}</p>
            </li>
        </ul>
        <hr>
        <h3>循环对象</h3>
        <ul><!-- 无序列号的列表-->
            <li v-for="item,key in students[0]">
               {{key}} - {{item}}
            </li>
            <img :src="students[0].img">
        </ul>
        <hr>
        <h3>条件+循环渲染(将偶数年龄的学生渲染出来)</h3>
        <ol> <!-- 有序列号的列表-->
            <li v-for="item,index in students" v-if="item.age%2==0">
                <h4>{{index}}.姓名:{{item.studentName}}</h4>
                <p>年龄：{{item.age}}---学校：{{item.school}}</p>
            </li>
        </ol>
    </div>

    <script type="text/javascript">
        // console.log(Vue)
        let app = new Vue({
            el:"#app",
            data:{
                stars:["蔡徐坤","胡歌",'范冰冰','李晨'],
                students:[
                    {
                        studentName:"小明",
                        age:18,
                        school:'清华',
                        img:'https://www.keaidian.com/uploads/allimg/190213/13174508_11.jpeg'
                    },{
                        studentName:"小美",
                        age:17,
                        school:'浙大'
                    },{
                        studentName:"小金",
                        age:12,
                        school:'北大'
                    },
                ]
            }
        })
    </script>
</body>
</html>